/*
  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果
  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址
*/
// 设置axios的基地址
// axios.defaults.baseURI = 'https://autumnfish.cn';

var app = new Vue({

  el: "#player",
  data: {
    // 查询关键字
    query: "",
    // 歌曲数组
    musicList: [],
    // 歌曲地址
    musicUrl: "",
    // 歌曲封面
    musicCover: "",
    // 歌曲评论
    hotComments: [],
    // 动画播放状态
    isPlaying: false,
    // 遮罩层的显示状态
    isShow: false,
    // mv地址
    mvUrl: ""

  },
  methods: {
    /**
     * 歌曲搜索
     */
    searchMusic() {
      /**
       * 这里可以解释清楚了, 会什么要把this暂存起来,
       * 因为这个axios里面this指向的不是Vue声明的实例!!!
       * 而是指向的是 windows !!!,
       * #
       * 想改变axios内部的指向
       * 1.使用箭头函数代替普通函数, ES6的箭头函数 '=>'
       * 内部的this 属于词法作用域, 有上下文确定 (也就是由外层调用者Vue来确定)
       * @type {methods}
       */
      console.log(this);  // 指向的Vue实例对象 app
      axios.get("https://autumnfish.cn/search?keywords=" + this.query)
        .then((response) => {
          this.musicList = response.data.result.songs;
          console.log(response)
          console.log(this);  //  指向的Vue实例对象 app
          console.log(this.musicList);
        }, (err) => {
          console.log(err)
        });
    },
    /**
     * 歌曲播放
     * @param musicId 歌曲id
     */
    playMusic: function (musicId) {
      // console.log(musicId);
      // 获取歌曲地址
      // 这个接口挂了
      axios.get("https://autumnfish.cn/song/url?id=" + musicId)
        .then((response) => {
            // console.log(response);
            this.musicUrl = response.data.data[0].url;
            console.log(this.musicUrl);
          }, (err) => {
            console.log(err);
          }
        )
      // 歌曲详情获取
      axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
        .then((response) => {
          console.log(response);
          this.musicCover = response.data.songs[0].al.picUrl;
          console.log(this.musicCover);
        }, (err) => {
          console.log(err);
        })

      // 歌曲评论获取
      axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
        .then((response) => {
          // console.log("--------------------")
          // console.log(response);
          this.hotComments = response.data.hotComments;
        }, (err) => {
          console.log(err);
        })
    },
    play: function () {
      // console.log("play");
      this.isPlaying = true;
    },
    pause: function () {
      // console.log("pause");
      this.isPlaying = false;
    },
    /**
     * 播放mv
     * @param mvid
     */
    playMv: function (mvid) {
      axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
        .then((response) => {
          // data.data.url
          // console.log(response);
          this.isShow = true;
          this.mvUrl = response.data.data.url;
          console.log(this.mvUrl);
        }, (err) => {
          console.log(err);
        })
    },
    /**
     * 隐藏元素
     */
    hide: function () {
      this.isShow = false;
    }
  }
});
